<template>
  <div class="container">
    <el-form
      :inline="true"
      label-width="70px"
      label-position="left"
      size="mini"
      class="demo-form-inline"
      style="padding-top: 18px;"
      @submit.native.prevent
    >
      <el-form-item label="创建人">
        <el-input clearable v-model="params.applyName" placeholder="创建人" class="the-input"></el-input>
      </el-form-item>
      <el-form-item label="批次ID">
        <el-input clearable v-model="params.batchId" placeholder="批次ID" class="the-input"></el-input>
      </el-form-item>
      <el-form-item label="批次名称">
        <el-input clearable v-model="params.batchName" placeholder="批次名称" class="the-input"></el-input>
      </el-form-item>
      <el-form-item label="活动ID">
        <el-input clearable v-model="params.activityId" placeholder="活动ID" class="the-input"></el-input>
      </el-form-item>
      <el-form-item label="活动名称">
        <el-input clearable v-model="params.activityName" placeholder="活动名称" class="the-input"></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <!-- <el-input v-model="params.createTime" placeholder="创建时间" class="the-input"></el-input> -->
        <el-date-picker
          v-model="params.startStopTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="消息类型">
        <el-select v-model="params.messageType" placeholder="请选择消息类型">
          <el-option label="请选择" value=""></el-option>
          <el-option label="到账提醒" value="1"></el-option>
          <el-option label="到期提醒" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit" @click="doSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" border size="small" height="300" stripe>
      <el-table-column fixed type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="batchId" label="批次ID" width="180"></el-table-column>
      <el-table-column prop="batchName" label="批次名称" width="180"></el-table-column>
      <el-table-column prop="activityId" label="活动ID" width="180"></el-table-column>
      <el-table-column prop="activityName" label="活动名称" width="180"></el-table-column>
      <el-table-column prop="messageType" label="消息类型" width="180" :formatter="messageTypeFormat"></el-table-column>
      <el-table-column prop="pushContent" label="消息内容" width="180"></el-table-column>
      <el-table-column prop="grantTime" label="发放时间" width="180"></el-table-column>
      <el-table-column prop="applyName" label="创建人" width="180"></el-table-column>
      <el-table-column prop="startTime" label="创建时间" width="180"></el-table-column>
      <el-table-column fixed="right" align="center" prop="date" label="操作" width="180">
        <template slot-scope="{row}">
          <el-button type="text" size="small" @click="showDetail(row)">查看</el-button>
          <el-button type="text" size="small" @click="doEdit(row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-area" style>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="params.pageSize"
        :current-page.sync="params.pageIndex"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        :page-count="pageCount"
      ></el-pagination>
    </div>
    <el-dialog title="修改消息任务" :visible.sync="dialogVisible" width="600">
      <el-form :disabled="detail.disabled" label-width="140px" class="demo-ruleForm">
        <el-form-item label="是否到账提醒：" v-if="detail.flag === 1">
          <el-radio-group v-model="detail.arriveType">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否到期预警：" v-else>
          <el-radio-group v-model="detail.expirationNotice">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否发送短信：" v-if="detail.flag === 1">
          <el-radio-group v-model="detail.messageType" :disabled="detail.arriveType === 0">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否发送短信：" v-else>
          <el-radio-group v-model="detail.smsFlag" :disabled="detail.expirationNotice === 0">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否推送AppPush：" v-if="detail.flag === 1">
          <el-radio-group v-model="detail.pushType" :disabled="detail.arriveType === 0">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
          <el-input
            clearable
            :disabled="disabledMessageContent"
            v-model="detail.pushContent"
            placeholder="请输入AppPush内容"
            style="width: 300px; margin-left: 20px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否推送AppPush：" v-else>
          <el-radio-group v-model="detail.pushFlag" :disabled="detail.expirationNotice === 0">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
          <el-input
            clearable
            :disabled="disabledSmsContent"
            v-model="detail.smsDes"
            placeholder="请输入AppPush内容"
            style="width: 300px; margin-left: 20px;"
          ></el-input>
        </el-form-item>
      </el-form>
      <span v-if="!detail.disabled" slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="makeSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCouponMessageCenterList, getMessageCenterDetail, doEditMessage } from '@/api/coupon'
import { getStatusNameByStatus } from '@/utils/status'

export default {
  name: "message-center",
  data() {
    return {
      // 用于显示或隐藏日志弹窗
      dialogVisible: false,
      params: {
        // 每页条数
        pageSize: 10,
        // 页码
        pageIndex: 1,
        // 活动id
        activityId: "",
        // 活动名称
        activityName: '',
        // 消息类型
        messageType: '',
        // 申请人
        applyName: '广电测试',
        // 创建起止时间
        startStopTime: [],
        // 优惠券批次id
        batchId: '',
        // 优惠券批次名称
        batchName: '',
      },
      detail: {
        // 是否到期预警
        expirationNotice: '0',
        // 是否到账提醒
        arriveType: '0',
        pushType: '0',
        pushFlag: '0',
        smsFlag: '0',
        messageType: '0',
        smsDes: '',
        pushContent: '',
        disabled: false,
        id: '',
        flag: ''
      },
      emptyText: "",
      // 总条目数
      totalCount: 100,
      // 总页数
      pageCount: 0,
      tableData: [],
      logs: [],
    };
  },
  // watch: {
  //   'detail.arriveType'(val){

  //   }
  // },
  computed: {
    disabledSmsContent () {
      return !(this.detail.expirationNotice === 1 && (this.detail.smsFlag === 1 || this.detail.pushFlag === 1));
    },
    disabledMessageContent () {
      return !(this.detail.arriveType === 1 && (this.detail.messageType === 1 || this.detail.pushType === 1));
    }
  },
  methods: {
    messageTypeFormat (row, column, cellValue, index) {
      return cellValue === 1 ? '到账提醒' : '到期提醒'
    },
    makeSure () {
      doEditMessage(this.detail.id, this.detail.flag, {
        "arriveType": parseInt(this.detail.arriveType),
        "expirationNotice": parseInt(this.detail.expirationNotice),
        "messageType": parseInt(this.detail.messageType),
        "pushContent": this.detail.pushContent,
        "pushFlag": parseInt(this.detail.pushFlag),
        "pushType": parseInt(this.detail.pushType),
        "smsDes": this.detail.smsDes,
        "smsFlag": parseInt(this.detail.smsFlag)
      }).then(res=>{
        if (res.code === 200) {
          this.$message.success('修改成功!');
          this.dialogVisible = false;
        } else {
          this.$message.error(res.message);
        }
      }).catch(e=>{
        console.log(e);
      })
    },
    // 导出
    doExport() {},
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.params.pageIndex = 1;

      this.getCouponMessageCenterList();
    },
    handleCurrentChange(pageIndex) {
      this.params.pageIndex = pageIndex;
      this.getCouponMessageCenterList();
    },
    doSearch() {
      this.params.pageIndex = 1;
      this.getCouponMessageCenterList();
    },
    getCouponMessageCenterList() {
      // console.log(this.params.startStopTime);
      if (!this.params.startStopTime) {
        this.params.startStopTime = ['', ''];
      }

      // 加载优惠券列表
      getCouponMessageCenterList(this.params.pageIndex, this.params.pageSize, {
        batchId: this.params.batchId,
        batchName: this.params.batchName,
        applyName: this.params.applyName,
        beginTime: this.params.startStopTime[0],
        endTime: this.params.startStopTime[1],
        messageType: this.params.messageType,
        activityId: this.params.activityId,
        activityName: this.params.activityName
      }).then((res) => {
        // Todo
        // 如果成功返回 设置数据
        // 否则提示
        if (res.code === 200) {
          this.tableData = res.result.records;
          this.totalCount = res.result.total;
          this.pageCount = res.result.pages;
        } else {
          this.tableData = [];
          this.emptyText = res.msg;
          this.totalCount = 0;
          this.pageCount = 0;
        }
      });
    },
    refresh() {
      this.pageIndex = 1;
      this.getCouponMessageCenterList();
    },
    // 消息详情
    showDetail (row) {
      // Todo 具后端开发人员反馈 该出的需求有问题 暂时不对接
      this.dialogVisible = true;
      this.detail.disabled = true;
      const id = row.batchId || row.activityId;
      getMessageCenterDetail(id, row.flag).then(res=>{
        if (res.code === 200) {
          this.detail.id = id;
          this.detail.flag = row.flag;
          if (row.flag === 1) {
            // 是否到期预警
            this.detail.arriveType = res.result.arriveType;
            // 是否推送App
            this.detail.pushType = res.result.pushType;
            // 是否发送短信
            this.detail.messageType = res.result.messageType;
            this.detail.pushContent = res.result.pushContent;
          } else {
            // 是否到账提醒
            this.detail.expirationNotice = res.result.expirationNotice;
            // 到期提醒是否发送AppPush
            this.detail.pushFlag = res.result.pushFlag;
            this.detail.smsFlag = res.result.smsFlag;
            this.detail.smsDes = res.result.smsDes;
          }
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      })
    },
    // 编辑
    doEdit (row) {
      // Todo 具后端开发人员反馈 该出的需求有问题 暂时不对接
      this.dialogVisible = true;
      this.detail.disabled = false;
      const id = row.batchId || row.activityId;
      getMessageCenterDetail(id, row.flag).then(res=>{
        if (res.code === 200) {
          this.detail.id = id;
          this.detail.flag = row.flag;
          if (row.flag === 1) {
            // 是否到期预警
            this.detail.arriveType = res.result.arriveType;
            // 是否推送App
            this.detail.pushType = res.result.pushType;
            // 是否发送短信
            this.detail.messageType = res.result.messageType;
            this.detail.pushContent = res.result.pushContent;
          } else {
            // 是否到账提醒
            this.detail.expirationNotice = res.result.expirationNotice;
            // 到期提醒是否发送AppPush
            this.detail.pushFlag = res.result.pushFlag;
            this.detail.smsFlag = res.result.smsFlag;
            this.detail.smsDes = res.result.smsDes;
          }
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      })
    }
  },
  mounted() {
    // 加载优惠券列表
    this.getCouponMessageCenterList();
  },
};
</script>

<style lang="scss">
</style>